<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        form提交表单
        action : 数据提交的接口

        get / post
            get 发送的数据会直接显示在地址栏      安全性更低一些
            post 发送的数据  不会在地址栏显示     安全性更高一些

        接口：后端提供的    前后端进行数据交互的地方    就是一个地址

     -->
    <form action="" method="get">
        <input type="text" name="username"> 
        <input type="password" name="password">
        <input type="text" name="phone">
        <button type="submit">提交</button>
    </form>


    <script>

        //  中文会被编码 ， 不是乱码
        // 你   字母数字加部分符号
        var url = 'http://127.0.0.1:5500/day11/%E8%AF%BE%E5%A0%82%E4%BB%A3%E7%A0%81/html/04_%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%92%8C%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%BD%AC%E6%8D%A2.html?username=qq&password=222&phone=188' ;

     


        //  对象实际上是存储一个完整的对象的所有的属性和方法
        //  对象的值，只需要通过属性和方法去访问就可以了
        // {
        //     username : 'qq' ,
        //     password : '123' ,
        //     phone : 188
        // }

        // ['qq' , '123' , '188' , '18' , '90' , '金融港']
        // 数组是一组有序的数据
        // 访问的时候，只能通过下标去访问
        // 数组用来遍历读取很方便
        // 但是如果去读取指定的值的时候，需要去找到对应的下标，就比较麻烦



        // 分析：需要的东西都在问号后面
        // var arr = url.split('?') ;
        // console.log(arr) ;
        // var res = arr[1] ;
        // console.log(res) ;

        var str = url.split('?')[1] ;
        console.log(str) ;   // username=qq&password=222&phone=188

        var arr = str.split('&') ;
        console.log(arr);   // ['username=qq', 'password=222', 'phone=188']

        var obj = {} ;

        for(var i in arr) {
            // console.log(arr[i]) ;   username=qq
            var arr2 = arr[i].split('=') ;
            console.log(arr2);
            obj[arr2[0]] = arr2[1] ;
        }
        console.log(obj);





        // -------------------------------------------------------------

        var obj2 = {
            username : 'qq' ,
            password : '123' ,
            phone : 188
        }

        // ->   username=qq&password=123&phone=188


        var str = '' ;
        for(var key in obj2) {
            str += key + '=' + obj2[key] + '&';
        }

        console.log(str);  // username=qq&password=123&phone=188&

        var str2 = str.substring(0 , str.length - 1) ;
        console.log(str2);



    </script>
    
</body>
</html>